<template>
  <table border="1" align="center" width="400px">
    <caption>
      <h2>前端语言列表</h2>
    </caption>
    <tr>
      <td>序号</td>
      <td>内容</td>
    </tr>
    <tr align="center" v-for="(item, index) in list" :key="index">
      <td>{{ index + 1 }}</td>
      <td>{{ item }}</td>
    </tr>
  </table>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      list: ['HTML', 'CSS', 'JavaScript', 'Bootstrap', 'Vue']
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>
<style scoped>
    h2{
        color: red;
    }
</style>
